<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-row :gutter="50">
          <el-col :span="12">
            <el-card class="box-card">
              <i
                class="el-icon-grape cate-icon"
                style="color: #5570c6; background-color: #dce1ee"
              ></i>
              <span class="cate-title">品类数量</span>
              <div class="cate-data" style="color: #5570c6">
                {{ stats.categoryTotal }}个
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <i
                class="el-icon-watermelon cate-icon"
                style="color: #67c23a; background-color: #e0edda"
              ></i>
              <span class="cate-title">产品数量</span>
              <div class="cate-data" style="color: #67c23a">
                {{ stats.productTotal }}个
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px" :gutter="50">
          <el-col :span="12">
            <el-card class="box-card">
              <i
                class="el-icon-cherry cate-icon"
                style="color: #ffc107; background-color: #f0e8ce"
              ></i>
              <span class="cate-title">设备数量</span>
              <div class="cate-data" style="color: #ffc107">
                {{ stats.deviceTotal }}台
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <i
                class="el-icon-pear cate-icon"
                style="color: #f56c6c; background-color: #f5d0d0"
              ></i>
              <span class="cate-title">上报数据量</span>
              <div class="cate-data" style="color: #f56c6c">
                {{ stats.reportTotal }}条
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div style="margin-top: 30px">
          数据上报统计：
          <v-chart style="width: 100%; height: 300px" ref="lineChart" />
        </div>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <v-chart class="chart" ref="chart" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import VChart from "vue-echarts";
import { GetMainStatsData } from "@/api/statsApi";

use([
  CanvasRenderer,
  PieChart,
  GridComponent,
  LineChart,
  UniversalTransition,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default {
  name: "Chart",
  props: {
    name: {
      type: String,
      default() {
        return "";
      },
    },
    properties: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    VChart,
  },
  data() {
    return {
      stats: {
        categoryTotal: 0,
        productTotal: 0,
        deviceTotal: 0,
        reportDataStats: [],
      },
    };
  },
  mounted() {
    this.refreshData();
  },
  watch: {
    properties: function () {
      this.refreshData();
    },
  },
  methods: {
    refreshData: function () {
      // const app = {
      //   config: {
      //     rotate: 90,
      //     align: "left",
      //     verticalAlign: "middle",
      //     position: "insideBottom",
      //     distance: 15,
      //   },
      // };
      // const labelOption = {
      //   show: true,
      //   position: app.config.position,
      //   distance: app.config.distance,
      //   align: app.config.align,
      //   verticalAlign: app.config.verticalAlign,
      //   rotate: app.config.rotate,
      //   formatter: "{c}  {name|{a}}",
      //   fontSize: 16,
      //   rich: {
      //     name: {},
      //   },
      // };

      const loadding = Loading.service();
      GetMainStatsData().then((res) => {
        this.stats = res;

        //数据上报统计
        const reportStats = res.reportDataStats;
        let times = [];
        let counts = [];
        reportStats.forEach((d) => {
          times.push(new Date(d.time).toLocaleString());
          counts.push(d.data);
        });

        this.$refs.lineChart.setOption({
          animation: true,
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "cross" },
          },
          xAxis: {
            name: "时间",
            type: "category",
            data: times,
          },
          yAxis: {
            type: "value",
            name: "次数",
          },
          series: [
            {
              data: counts,
              type: "line",
              smooth: true,
            },
          ],
        });

        this.$refs.chart.setOption({
          title: {
            text: "设备数量分布",
            subtext: new Date().toLocaleString(),
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: res.deviceStatsOfCategory,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });

        loadding.close();
      });
    },
  },
};
</script>

<style scoped>
.cate-icon {
  font-size: 30px;
  font-weight: bold;
  border-radius: 30px;
}
.cate-title {
  padding: 10px 10px;
  font-weight: bold;
}
.cate-data {
  text-align: center;
  padding: 10px 10px 0 10px;
  font-weight: bold;
}
.chart {
  width: 100%;
  height: 500px;
}
</style>